<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../css/log/log-common.css"/>
    <script src="../../js/mui.min.js"></script>
    <style type="text/css">
    	.head-img-wrap {}
    	.head-img-box {border-radius: 50%;overflow: hidden;}
    	.porel {position: relative;width: 80px;height: 80px;margin: 20px auto;}
    	#add-headimg {position: absolute;right: 0px;bottom: 0px;font-size: 18px;font-weight: bold;color: #fff;border-radius: 50%;overflow: hidden;background: #39bf9e;}
    	.show-pwd {width: 40px;height: 40px;}
    	.divide-top {margin-top: 10px;}
    	.button-group {margin-top: 20px;}
    	.code-wrap {width: 100px;height: 40px;box-sizing: border-box;padding: 7px 10px 7px 0;}
    	#get-code {width: 90px;padding: 0;height: 26px;font-size: 13px;}
    	#type {margin-bottom: 0;padding: 0 15px;width: 100%;color: #aaa;border-radius: 0;}
    	.code-box {margin-right: 100px;}
    	.eye-one {display: block;}
    	.eye-two {display: none;}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-arrowthinleft mui-pull-left"></a>
		<h1 class="mui-title mui-text-left">注册</h1>
	</header>
	
	<div class="mui-content">
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="head-img-wrap">
					<div class="porel" id="choose">
						<div class="head-img-box">
							<img src="../../img/log/user-photo.png" width="100%" class="choose-headimg"/>
							<span id="add-headimg" class="mui-icon mui-icon-plusempty choose-headimg"></span>
						</div>
					</div>
				</div>
				<div class="mui-input-group">
					<div class="mui-input-row">
						<input type="text" id="nickname" placeholder="用户名" maxlength="10">
					</div>
					<div class="mui-input-row">
						<select id="type" class="type-select mui-text-left">
							<option value="">学生</option>
						</select>
					</div>
				</div>
				<div class="mui-input-group divide-top">
					<div class="mui-input-row">
						<input type="text" maxlength="11" id="phone" placeholder="手机号码">
					</div>
					<div class="mui-input-row">
						<span class="mui-pull-right code-wrap">
							<button id="get-code" class="mui-btn btn-color mui-btn-outlined">获取验证码</button>
						</span>
						<div class="code-box">
							<input type="text" id="code" maxlength="6" placeholder="验证码">
						</div>
					</div>
				</div>
				<div class="mui-input-group divide-top">
					<div class="mui-input-row pwd-input">
						<span class="mui-pull-right show-pwd">
							<img src="../../img/log/eye.png" class="eye-one" width="100%"/>
							<img src="../../img/log/1182351.png" class="eye-two" width="100%"/>
						</span>
						<div class="input-box">
							<input type="password" id="pwd" placeholder="密码">
						</div>
					</div>
					<div class="mui-input-row pwd-input">
						<span class="mui-pull-right show-pwd">
							<img src="../../img/log/eye.png" class="eye-one" width="100%"/>
							<img src="../../img/log/1182351.png" class="eye-two" width="100%"/>
						</span>
						<div class="input-box">
							<input type="password" id="conform-pwd" placeholder="确认密码">
						</div>
					</div>
				</div>
				<div class="button-group">
					<button id="action-logup" class="mui-btn btn-color mui-btn-block">注册</button>
				</div>
			</div>
		</div>
	</div>
	<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell" id="take-photo">
				<span>拍照</span>
			</li>
			<li class="mui-table-view-cell" id="choose-pic">
				<span>从相册中选取</span>
			</li>
		</ul>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<a href="#picture"><b>取消</b></a>
			</li>
		</ul>
	</div>
	<script src="../../js/utils/tools.js"></script>
	<script src="../../js/libs/jquery.min.js"></script>
	<script>
      	mui.init();
      	mui.plusReady(function(){
      		mui(".mui-scroll-wrapper").scroll();
      		// 控制密码显示与隐藏
			$('.show-pwd').on('tap',function(){
				var $this = $(this);
            	var one = $this.find(".eye-one");
            	var two = $this.find(".eye-two");
            	var $input = $this.parent(".pwd-input").find("input");
            	if(one.css("display") == "block"){
            		one.css("display", "none");
            		two.css("display", "block");
            		$input.attr("type","text");
            	} else {
            		one.css("display", "block");
            		two.css("display", "none");
            		$input.attr("type","password");
            	}
			})
      		
      		// 获取用户类型
      		getType(function(data){
      			var html = "";
      			var tinfo = data.datas;
      			for(var i = 0; i < tinfo.length; i++){
	      			html += '<option value="'+ tinfo[i].id +'">'+ tinfo[i].name +'</option>';
      			}
      			$("#type").html(html);
      		})
      		function getType(callback){
      			Ajax({
      				url : "/members/get_members_types"
      			}, function(data){
      				callback(data);
      			}, function(err){
      				console.log(err);
      			})
      		}
      		$("#type").on("focus", function(){
      			$(this).css("color", "#666")
      		})
      		
      		// 手机号码，验证码修正
      		fixedNum("#code");
      		fixedNum("#phone");
      		
      		// 解决部分手机number类型的时候不出现placeholder属性值
      		function fixedNum(selector){
      			$(selector).on("focus", function(){
	      			$(this).attr("type", "number");
	      		})
	      		$(selector).on("blur", function(){
	      			$(this).attr("type", "text");
	      		})
      		}
      		
      		// 获取验证码
      		var time = 60;
      		var timer = null;
      		$("#get-code").on("tap", function(){
      			var $this = $(this);
      			var phone = formateval($("#phone").val());
      			if(phone && phone.length != 11){
      				mui.toast("请输入合法的手机号码")
      			} else {
      				timer = setInterval(function(){
      					if(time != 0){
	  						$this.html((time--) + "s");
      					} else {
      						$this.attr("disabled", false);
      						$this.html("重新发送");
      					}
  					},1000)
      				$this.attr("disabled", true);
      				Ajax({
      					url : "/publics/smscodes",
      					data : {
      						mobile : phone
      					}
      				}, function(data){
      					mui.toast("请求发送成功");
      				}, function(err){
      					$this.attr("disabled", false);
      					clearInterval(timer);
      					$this.html("重新发送");
      				})
      			}
      		})
      		
      		// 注册按钮操作
      		$("#action-logup").on("tap", function(){
      			var $this = $(this);
      			var info = {
      				username : formateval($("#nickname").val()),
      				typesid : formateval($("#type").val()),
      				mobile : formateval($("#phone").val()),
      				checkcode : formateval($("#code").val()),
      				password : formateval($("#pwd").val()),
      				vpassword : formateval($("#conform-pwd").val())
      			}
      			logup(info, function(data, infos){
      				if(data){
      					mui.toast(data)
      				}
      				if(infos){
      					$this.attr("disabled", true);
      					$this.html("注册中...")
      					console.log(typeof infos+"  "+JSON.stringify(infos))
      					Ajax({
      						url : "/members/registers",
      						data : infos
      					}, function(data){
      						console.log(JSON.stringify(data))
      						plus.storage.setItem("userinfo", JSON.stringify(infos));
      						openWindow("../../index.html");
      					}, function(err){
      						console.log(JSON.stringify(err))
      						$this.attr("disabled", false);
      						$this.html("注册")
      						$("#code").html("重新发送");
      						$("#code").attr("disabled", false);
      					})
      				}
      			})
      		})
      		
      		// 注册函数
      		function logup(valobj, callback){
      			var reph = /^[0-9]{11}$/;
				var repw = /^[\\.a-zA-Z0-9_]{6,}$/;
				console.log(valobj.username)
				if(!valobj.username && (valobj.username.length < 2 || valobj.username.length > 10)){
					callback("注册用户名不规范");
					return;
				}
				if(!valobj.typesid){
					callback("请选择合法的工作类型");
					return;
				}
				if(!reph.test(valobj.mobile)){
					callback("只允许中国范围内的手机号码");
					return;
				}
				if(valobj.password.length < 6){
					callback("注册密码不能小于六位");
					return;
				} else if(!repw.test(valobj.password)){
					callback("密码中包含非法字符");
					return;
				}
				if(valobj.password != valobj.vpassword){
					callback("请确认密码正确");
					return;
				}
				if(!(valobj.username && valobj.typesid && valobj.mobile && valobj.checkcode && valobj.password && valobj.vpassword)){
					callback("请完善注册内容");
					return;
				}
				callback(null, valobj);
      		}
      		
      		// 字符串处理
      		function formateval(str){
      			return $.trim(str);
      		}
      		$(".choose-headimg").on("tap", function(){
      			mui("#picture").popover("toggle");
      		})
      		
      		// 照相获取图片
      		$("#take-photo").on("tap", function(){
      			var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				cmr.captureImage(function( path ){
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						var local = entry.toLocalURL();
						
					});
					mui("#picture").popover("toggle");
				}, function( error ) {
					console.log("Capture image failed: " + error.message );
				}, {
					resolution:res, format:fmt
				});
      		})
      		
      		// 从相册中获取图片
      		$("#choose-pic").on("tap", function(){
      			
      		})
      		
      		// 自定义事件触发添加图像图片
      		window.addEventListener("refersh:heaimg", function(eve){
      			
      		})
      	})
    </script>
</body>
</html>